@import "base";

@mixin adapter($size){
	$list : 768px,414px,412px,384px,375px,360px,320px;
	@each $i in $list{
		@media screen and (max-width:#{$i}){
			html{
				font-size: $i/$size * 100px;
			}
		}
	}
}

@include adapter(750px);

a{
	text-decoration: none;
}
body{
	margin: 0;
}
.header{
	height: 0.8rem;
	background-image: url('../img/bg_03.png');
	background-repeat: repeat-x;
	background-position: center;
	width: 100%;
	position: fixed;
	z-index: 555;
	h1{
		font-style: normal;
		text-align: center;
		line-height: 0.8rem;
		color:white;
		@include c-align();
		font-size: 0.36rem;
		font-family: '苹方';
	}
	i{
		width: 0.36rem;
		height: 0.36rem;
		@include v-align();
		right: 0.34rem;
		display: block;
		background-image: url('../img/images_03.png');
		background-repeat: no-repeat;
		background-size:.36rem .36rem;
		background-position: center center;
	}
}
.content{
	position: fixed;
	z-index: 2;
	padding-top: .8rem;
	width: 100%;
	height: 100%;
	background-color: #efeff4;
	box-sizing: border-box;
	overflow: scroll;
	.subheader{
		border-bottom:0.01rem solid #EFEFF4;
		box-sizing: border-box;
		background-color: #efeff4;
		width: 100%;
		height: 0.88rem;
		input{
			height: .54rem;
			width: 7.16rem;
			border:0.01rem solid #EFEFF4;
			border-radius: 0.09rem;
			@include c-align();
			@include v-align();
		}
		.search{
			width: .96rem;
			height: .32rem;
			@include center();
			.sousuo{
				width: .96rem;
				height: .32rem;
				font-size: 0.26rem;
				line-height: .32rem;
				color: #8e8e93;
				text-align: right;
				background-image: url('../img/images_07.png');
				background-repeat: no-repeat;
				background-position: left center;
				background-size: .28rem .28rem;
			}
		}
		.mico{
			width: .21rem;
			height: .32rem;
			@include v-align();
			right: .38rem;
			background-image: url('../img/IMG_1727_06.png');
			background-position: center center;
			background-size: .21rem .32rem;
			background-repeat: no-repeat;
		}
	}
	.liebiao{
		width: 100%;
		padding-left: .2rem;
		box-sizing: border-box;
		background-color: white;
		.item{
			width: 100%;
			height: 1.35rem;
			border-bottom:0.01rem solid #d9d9d9;
			.touxiang{
				width: 1rem;
				height: 1rem;
				float: left;
				@include v-align();
				left: 0;
				img{
					width: 1rem;
					height: 1rem;
					border:none;
				}
			}
			.info{
				width: 86%;
				height: 1rem;
				// background-color: #970A0A;
				@include v-align();
				left:1rem;
				.user{
					height: 0.5rem;
					.username{
						padding-left: 0.2rem;
						padding-top: .12rem;
						font-size: .3rem;
						font-family: '苹方';
					}
					.time{
						@include v-align();
						right: .22rem;
						font-size: .18rem;
						color:#b2b2b2;
						padding-top: .12rem;
					}
				}
				.lastMeg{
					height: 0.5rem;
					font-size: .26rem;
					color:#b2b2b2;
					padding-left: 0.2rem;
					padding-top: .12rem;
				}
			}
		}
	}
}

.nav{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: .98rem;
	background-color: #F7F7F7;
	z-index: 999;
	border-top:0.01rem solid #B2B2B2;
	li{
		width: 25%;
		height: .98rem;
		float: left;
		.img{
			width: 100%;
			height: .7rem;
			background-repeat: no-repeat;
			background-position: center center;
		}
		.word{
			width: 100%;
			height: .28rem;
			text-align: center;
			line-height: .28rem;
			font-size: .2rem;
			font-family: '苹方';
			a{
				color: #9D9D9D;
			}
		}
	}
	.nav1{
		.img{
			background-image: url('../img/images_19.png');
			background-size: .52rem .46rem;
		}
		.word{
			a{
				color: #16AE14;
			}
		}
	}
	.nav2{
		.img{
			background-image: url('../img/images_21.png');
			background-size: .54rem .46rem;
		}
		.word{
			color: #9D9D9D;
		}
	}
	.nav3{
		.img{
			background-image: url('../img/images_24.png');
			background-size: .46rem .46rem;
		}
		.word{
			color: #9D9D9D;
		}
	}
	.nav4{
		.img{
			background-image: url('../img/images_26.png');
			background-size: .47rem .46rem;
		}
		.word{
			color: #9D9D9D;
		}
	}
}



.pengyouquan{
	width: 100%;
	height: .86rem;
	border-top: 0.01rem solid #d9d9d9;
	border-bottom: 0.01rem solid #d9d9d9;
	background-color: white;
	margin-top: .3rem;
	.friend{
		width: 100%;
		height: 100%;
		position: relative;
		.icon1{
			width:.44rem;
			height: .42rem;
			background-image: url('../img/find_06.png');
			background-size: .44rem .42rem;
			@include v-align();
			left:.34rem;
		}
		span{
			left: 1.08rem;
			@include v-align();
			display: block;
			width: 1rem;
			height: .42rem;
			line-height: .42rem;
			font-size: .3rem;
			text-align: center;
			font-weight: bold;
			font-family: '苹方';
		}
		img{
			width: .62rem;
			height: .64rem;
			@include v-align();
			right: .7rem;
		}
		.more{
			width: .3rem;
			height: .26rem;
			background-image: url('../img/find_12.png');
			@include v-align();
			right: .3rem;
			background-size: .3rem .26rem;
			background-repeat: no-repeat;
			background-position: center center;
		}
	}
}
.saoyisao{
	margin-top: .4rem;
	.sao{
		.icon2{
			background-image: url('../img/find_10.png');
		}
	}
}

.fujin{
	margin-top: .4rem;
	.fujinren{
		.icon3{
			background-image: url('../img/find_16.png');
		}
		span{
			width: 1.34rem;
		}
	}
}
.gengduo{
	height: 1.74rem;
	.gouwu{
		margin-left: .3rem;
		box-sizing: border-box;
		border-bottom: 1px solid #D9D9D9;
		height: .86rem;
		span{
			width: .7rem;
			left: .78rem;

		}
		.icon4{
			background-image: url('../img/find_18.png');
			left:.04rem;
		}
		.more{
			right: 0.6rem;
		}
	}
	.game{
		height: .86rem;
		border-bottom: none;
		.icon5{
			background-image: url('../img/find_20.png');
			// left:.04rem;
		}
		.more{
			// right: 0.6rem;
		}
		span{
			width: .7rem;
			// left: .78rem;
		}
	}
}
.nav{
	.nav-inner{
		.nav1{
			.img{
				background-image: url('../img/find_23.png');
			}
			.word{
				color:#929292;
			}
		}
		.nav3{
			.img{
				background-image: url('../img/find_25.png');
			}
			.word{
				color:#09BB07;
			}
		}
	}
}


.content{
	.me{
		width: 100%;
		height: 1.76rem;
		background-color: white;
		margin-top: .3rem;
		border-top: 0.01rem solid #D9D9D9;
		border-bottom: 0.01rem solid #D9D9D9;
		padding-left: .27rem;
		box-sizing: border-box;
		.headImg{
			width: 1.3rem;
			height: 1.3rem;
			background-image: url('../img/me_03.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 1.3rem 1.3rem;
			@include v-align();
		}
		.infomation{
				width: 3.3rem;
				height: 1.3rem;
				@include v-align();
				left:1.57rem;
				.userN{
					width: 100%;
					height:.65rem;
					line-height: .65rem;
					h3{
						font-style: normal;
						width: 1.3rem;
						display: block;
						font-size: .32rem;
						text-align: center;
						font-family: '苹方';
						padding-left: .25rem;
						box-sizing: border-box;
					}
				}
				.weixinhao{
					width: 100%;
					height:.65rem;
					line-height: .65rem;
					span{
						font-family: '苹方';
						display: block;
						padding-left: .30rem;
						font-size: .28rem;
						font-weight: bold;
					}
				}
			}
		.erweima{
			width: .34rem;
			height: .34rem;
			background-image: url('../img/me_06.png');
			background-size: .34rem;
			background-position: center;
			background-repeat: no-repeat;
			@include v-align();
			right: .7rem;
		}
		.more{
			width: .3rem;
			height: .26rem;
			background-image: url('../img/find_12.png');
			@include v-align();
			right: .3rem;
			background-size: .3rem .26rem;
			background-repeat: no-repeat;
			background-position: center center;
		}
	}
	.option{
		width: 100%;
		height: auto;
		border-top: 0.01rem solid #d9d9d9;
		border-bottom: 0.01rem solid #d9d9d9;
		padding-left: .3rem;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-top: .4rem;
		li{
			height: .86rem;
			border-bottom: 0.01rem solid #D9D9D9;
			width: 100%;
			span{
				@include v-align();
				display: block;
				width: 1rem;
				height: .42rem;
				line-height: .42rem;
				font-size: .32rem;
				text-align: left;
				font-weight: bold;
				font-family: '苹方';
				left: .79rem;
			}
			.more{
				width: .3rem;
				height: .26rem;
				background-image: url('../img/find_12.png');
				@include v-align();
				right: .3rem;
				background-size: .3rem .26rem;
				background-repeat: no-repeat;
				background-position: center center;
			}
		}
		.album{
			.img1{
				width: 0.46rem;
				height: 0.36rem;
				background-image: url('../img/me_11.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: .46rem .36rem;
				@include v-align();
			}
		}
		.shoucang{
			.img2{
				width: .46rem;
				height: .46rem;
				background-image: url('../img/me_14.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: .46rem .46rem;
				@include v-align();
			}
		}
		.money{
			.img3{
				width: .46rem;
				height: .36rem;
				background-image: url('../img/me_16.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: .46rem .36rem;
				@include v-align();
			}
		}
		.card{
			border-bottom: none;
			.img4{
				width: .46rem;
				height: .40rem;
				background-image: url('../img/me_18.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: .46rem .40rem;
				@include v-align();
			}
		}
	}
	.emoji{
		.moji{
			border-bottom: none;
			.img5{
				width: .46rem;
				height: .44rem;
				background-image: url('../img/me_20.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: .46rem .44rem;
				@include v-align();
			}
		}
	}
	.set{
		.setOp{
			border-bottom: none;
			.img6{
				width: .46rem;
				height: .46rem;
				background-image: url('../img/me_22.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: .46rem .46rem;
				@include v-align();
			}
		}
	}
}
 .nav{
 	.nav-inner{
 		.nav3{
 			.img{
 				background-image: url('../img/images_24.png');
 			}
 			.word{
				color:#A5A5A5;
 			}
 		}
 		.nav4{
 			.img{
 				background-image: url('../img/me_25.png');

 			}
 			.word{
				color:#09BB07;
 			}
 		}
 	}
 }

.header{
	i{
		width: .48rem;
		height: .35rem;
		background-image: url('../img/contact_03.png');
		background-size: .48rem .35rem;
		background-repeat: no-repeat;
		background-position: center;
	}
}
.content{
	.subheader{
		input{
			width: 6.86rem;
			left:.16rem;
			margin-left: 0;
		}
		.search{
			left:-0.12rem;
		}
		.mico{
			right: .64rem;
		}
	}
	.new{
		width: 100%;
		height: auto;
		border-top: 0.01rem solid #d9d9d9;
		border-bottom: 0.01rem solid #d9d9d9;
		padding-left: .3rem;
		box-sizing: border-box;
		background-color: #FFFFFF;
		// margin-top: .4rem;
		li{
			height: 1.09rem;
			border-bottom: 0.01rem solid #d9d9d9;
			.pic{
				width: .72rem;
				height: .72rem;
				@include v-align();
				background-repeat: no-repeat;
				background-position: center;
				background-size: .72rem;
			}
			.zi{
				width: 50%;
				height: .72rem;
				@include v-align();
				left:.92rem;
				span{
					display: block;
					font-size: .32rem;
					line-height: .72rem;
					font-family: '苹方';
					font-weight: bold;
				}
			}
		}
		.newFriend{
			.pic{
				background-image: url('../img/contact_07.png');
			}
		}
		.qunliao{
			.pic{
				background-image: url('../img/contact_10.png');
			}
		}
		.tag{
			.pic{
				background-image: url('../img/contact_12.png');
			}
		}
		.gongzhonghao{
			border-bottom: none;
			.pic{
				background-image: url('../img/contact_14.png');
			}
		}
	}

	.contact{
		width: 100%;
		height: auto;
		li{
			width: 100%;
			height: auto;
			.zimu{
				height: .44rem;
				width: 100%;
				background-color: #F0F0F6;
				font-size: .3rem;
				padding-left: .2rem;
				box-sizing: border-box;
			}
			.person{
				width: 100%;
				height: auto;
				padding-left: .3rem;
				box-sizing: border-box;
				background-color: white;
				li{
					width: 100%;
					height: 1.09rem;
					border-bottom: 0.01rem solid #d9d9d9;
					.pic{
						width: .72rem;
						height: .72rem;
						@include v-align();
						background-repeat: no-repeat;
						background-position: center;
						background-size: .72rem;
					}
					.zi{
						width: 50%;
						height: .72rem;
						@include v-align();
						left:.92rem;
						span{
							display: block;
							font-size: .32rem;
							line-height: .72rem;
							font-family: '苹方';
							font-weight: bold;
						}
					}
				}
				.demo1{
					.pic{
						background-image: url('../img/contact_16.png');
					}
				}
				.demo2{
					.pic{
						background-image: url('../img/contact_18.png');
					}
				}
				.demo3{
					border-bottom: none;
					.pic{
						background-image: url('../img/contact_20.png');
					}
				}
			}
		}

	}



}

.cebian{
	position: fixed;
	right: 0;
	top: 3rem;
	width: .3rem;
	height: auto;
	z-index: 999;
	li{
		width: .3rem;
		height: .3rem;
		font-size: .2rem;
		text-align: center;
		line-height: 0.3rem;
		font-style: normal;
		color: #555555;
		// font
	}
	.fangda{
		background-image: url('../img/contact_88.png');
		background-size: .24rem;
		background-repeat: no-repeat;
		background-position: center;
	}
}


.nav{
	.nav-inner{
		.nav2{
			.img{
				background-image: url('../img/contact_23.png')
			}
			.word{
				color:#09BB07;
			}
		}
		.nav4{
			.img{
				background-image: url('../img/images_26.png');
			}
			.word{
				color: #B9B9B9;
			}
		}
	}
}

